<template>
	<!-- 巡检端我的 -->
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col section_1">
				<view class="s-f-h">个人中心 </view>
				<view class="flex-col group_1">
					<view class="flex-row" style="justify-content: space-between;" @click="toinfo">
						<view class="flex-row">
							<image :src="infolist.address" class="image" />
							<view class="flex-col items-center group_4">
								<text class="text_1">{{infolist.name}}</text>
								<text class="text_2" style="">ID：{{infolist.id}}</text>
							</view>
							<view class="flex-col text-wrapper"><text class="text_3">巡检员</text></view>
						</view>
						<view class="toright">
							<u-icon name="arrow-right" color="#ffffff" size="18"></u-icon>
						</view>
					</view>
					<view class="flex-row items-center" style="margin-top: 30rpx;">
						<view>
							<text class="text_6">工作地区：{{provinceName}}{{cityName}}{{areaName}}</text>
						</view>
						<view class="">
							<view class="items-center group_6">
								<text class="text_4">I</text>
								<text class="text_5" @click="toaddress">编辑</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col section_2">
				<view class="justify-between group_7">
					<text class="text_7">我的项目统计</text>
					<view style="padding-left: 46%;font-size: 28rpx;">
						{{$u.timeFormat(value1, 'yyyy年mm月')}}
					</view>
					<view class="flex-row" @click="show = true">
						<u-datetime-picker :show="show" v-model="value1" mode="year-month" @close='closePick'
							@confirm='confirmPick' @cancel='cancelPick' @change='changePick'></u-datetime-picker>
						<!-- <image :src="$IMG_URL+'16557868075783727961.png'" class="image_3" /> -->
					</view>
				</view>
				<view class="flex-row equal-division">
					<view class="flex-col items-center equal-division-item" @click="gotoonsited">
						<text class="text_9">{{InspectionNum}}</text>
						<text class="text_11">巡检次数</text>
					</view>
					<view class="flex-col items-center equal-division-item group_10" @click="gotoassess">
						<text class="text_9">{{score}}</text>
						<text class="text_11">评分</text>
					</view>
				</view>
			</view>
			<view class="flex-col section_3">
				<!-- 我的消息 -->
				<navigator url="/pages/common/myInfo/myInfo" hover-class=" none">
					<view class="justify-between group_11">
						<view class="flex-row items-center">
							<image :src="$IMG_URL+'16557870693665519238.png'" class="image_4" />
							<text class="text_20">我的消息</text>
							<view class="f-p" style="margin-left: 9rpx;">
								<u-icon name="arrow-right" color="#BFBFBF" size="16"></u-icon>
							</view>
						</view>
						<!-- <image :src="$IMG_URL+'16557867932573484806.png'" class="image_1" /> -->
					</view>
				</navigator>
				<view class="line-grey" ></view>
				<!-- 接单设置 -->
				<navigator url="/pages/onSite/mine/orderSet/orderSet" hover-class=" none">
					<view class="justify-between group_11">
						<view class="flex-row items-center">
							<image :src="$IMG_URL+'16557870700835221401.png'" class="image_4" />
							<text class="text_20">接单设置</text>
							<view class="f-p">
								<u-icon name="arrow-right" color="#BFBFBF" size="16"></u-icon>
							</view>
						</view>
						<image :src="$IMG_URL+'16557867932573484806.png'" class="image_1" />
					</view>
				</navigator>
							<view class="line-grey" ></view>
				<!-- 我的评价 -->
				<navigator url="/pages/common/assessCenter/assessCenter" hover-class=" none">
					<view class="justify-between group_11">
						<view class="flex-row items-center">
							<image :src="$IMG_URL+'16557870704747786759.png'" class="image_4" />
							<text class="text_20">我的评价</text>
							<view class="f-p">
								<u-icon name="arrow-right" color="#BFBFBF" size="16"></u-icon>
							</view>
						</view>
					</view>
				</navigator>
							<view class="line-grey" ></view>
				<!-- 常见问题 -->
				<navigator url="/pages/onSite/mine/problom/problom" hover-class=" none">
					<view class="justify-between group_11">
						<view class="flex-row items-center">
							<image :src="$IMG_URL+'16557870705422121868.png'" class="image_4" />
							<text class="text_20">常见问题</text>
							<view class="f-p">
								<u-icon name="arrow-right" color="#BFBFBF" size="16"></u-icon>
							</view>
						</view>
					</view>
				</navigator>
				<view class="line-grey" ></view>
				<!-- 系统设置 -->
				<navigator url="/pages/common/systemSet/systemSet" hover-class=" none">
					<view class="justify-between group_11">
						<view class="flex-row items-center">
							<image :src="$IMG_URL+'16557868061502632169.png'" class="image_4" />
							<text class="text_20">系统设置</text>
							<view class="f-p" style="margin-left: 9rpx;">
								<u-icon name="arrow-right" color="#BFBFBF" size="16"></u-icon>
							</view>
						</view>
					</view>
				</navigator>
				
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		name: 'mine',
		components: {},
		data() {
			return {
				time: '2022/2/2',
				infolist: [],
				name: '',
				show: false,
				value1: Number(new Date()),
				InspectionNum: '',
				score: '',
				provinceName: '',
				cityName: '',
				areaName: "",
			};
		},
		created() {
			this.getMRnum();
			this.getinfo();
		},
		onLoad() {
			setTimeout(function() {
				console.log('start pulldown');
			}, 1000);
			uni.startPullDownRefresh();
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		methods: {
			onPullDownRefresh() {
				console.log('refresh');
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			changePick(e) {
				const timeFormat = uni.$u.timeFormat;
				this.value1 = timeFormat(e.value, 'yyyy-mm')
				// this.show = false
			},
			cancelPick() {
				this.show = false;
			},
			getMRnum() {
				this.$http('other.spection').then(res => {
					if (res.code == 200) {
						this.score = res.data.score;
						this.InspectionNum = res.data.count;
					} else {
						uni.showToast({
							icon: "error",
							title: res.msg
						})
					}
				})
			},
			confirmPick(e) {
				// 确认
				const timeFormat = uni.$u.timeFormat;
				this.value1 = timeFormat(e.value, 'yyyy-mm')
				// this.show = false;
				let dateStr = this.value1.replace(/-/g, "");
				// console.log(dateStr)
				this.$http('other.spection', {
					dateStr: dateStr
				}).then(res => {
					if (res.code == 200) {
						this.score = res.data.score;
						this.InspectionNum = res.data.count;
						this.show = false;
					} else {
						uni.showToast({
							icon: "error",
							title: res.msg
						})
					}
				})
			},
			closePick() {
				this.show = false
			},
			getinfo() {
				this.$http('common.getInfo').then(res => {
					if (res.code == 200) {
						console.log(res.data, '个人信息')
						this.infolist = res.data;
						this.name = res.data.name;
						this.provinceName = this.infolist.inspectionSettings.provinceName;
						this.cityName = this.infolist.inspectionSettings.cityName;
						this.areaName = this.infolist.inspectionSettings.areaName;
						if (this.provinceName == '' || this.provinceName == null) {
							this.provinceName = '暂无地址'
						}
					} else {
						uni.showToast({
							icon: "error",
							title: res.msg
						})
					}
				})
			},
			toinfo() {
				uni.navigateTo({
					url: '/pages/onSite/mine/means/means'
				})
			},
			toaddress() {
				uni.navigateTo({
					url: 'pages/onSite/mine/address/address'
				})
			},
			gotoonsited() {
				uni.navigateTo({
					url: '/pages/onSite/mine/onsited/onsited'
				})
			},
			gotoassess() {
				uni.navigateTo({
					url: '/pages/common/assessCenter/assessCenter'
				})
			},
			bindPickerChange(e) {
				// console.log(e)
				this.index = e.detail.value;
			},
			bindTimeChange(e) {
				this.time = e.detail.value
			}
		},
	};
</script>

<style scoped lang="scss">
	.f-p {
		display: flex;
		flex-direction: row;
	
		padding-left: 435rpx;
	}

	.toright {
		// width: 40rpx;
		// height: 40rpx;
		margin-top: 50rpx;

	}

	.toright image {
		width: 100%;
		height: 100%;
		margin-top: 40rpx;

	}

	.group_19 {
		height: 76rpx;
	}

	.image_7 {
		align-self: flex-end;
		width: 578rpx;
		height: 2rpx;
	}

	.group_13 {
		padding: 40rpx 0 32rpx;
	}

	.image_20 {
		width: 54rpx;
		height: 54rpx;
	}

	.equal-division-item {
		flex: 1 1 324rpx;
		padding: 10rpx 0;
	}

	.image_1 {
		margin: 8rpx 0;
		width: 14rpx;
		height: 26rpx;
	}

	.image_4 {
		flex-shrink: 0;
		width: 40rpx;
		height: 40rpx;
	}

	.text_9 {
		color: #333333;
		font-weight: bold;
		font-size: 48rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 56rpx;
	}

	.text_11 {
		margin-top: 12rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.s-f-h {
		text-align: center;
		font-weight: 500;
		font-size: 36rpx;
		color: #FFF;
		letter-spacing: 1rpx;
	}

	.text_16 {
		letter-spacing: 2rpx;
		margin-left: 24rpx;
		margin-bottom: 9rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.line-grey {
		width: 576rpx;
		height: 0px;
		
		border: 1px solid #EEEEEE;
		margin-left:62rpx;
		opacity: 0.4;

	}

	.page {
		background-color: #f6f7f9ff;
		width: 100vw;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.group {
		padding-bottom: 74rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.tab-bar {
		padding: 6rpx 148rpx 16rpx;
		background-color: #ffffff;
		box-shadow: 0px -1rpx 0px 0px #eeeeee;
	}

	.section_1 {
		padding: 60rpx 38rpx 159rpx;
		background-image: url($IMG_URL+'/16557870678946393955.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.section_2 {
		margin: -112rpx 24rpx 0;
		padding: 30rpx 0;
		background-color: #ffffff;
		border-radius: 16rpx;
		position: relative;
	}

	.section_3 {
		margin: 24rpx 24rpx 0;
		padding: 4.5rpx 32rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.view_4 {
		margin-right: 12rpx;
	}

	.text {
		align-self: center;
		color: #ffffff;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.group_1 {
		margin-top: 49rpx;
	}

	.group_7 {
		padding: 0 24rpx;
	}

	.equal-division {
		margin-top: 25rpx;
		padding: 0 26rpx;
	}

	.group_11 {
	   height:112rpx;
	   line-height:112rpx;
	}

	.image_8 {
		margin-top: 4.5rpx;
	}

	.group_17 {
		margin-top: 4.5rpx;
		padding: 24.5rpx 0 0rpx;
	}

	.text_21 {
		color: #333333;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_22 {
		color: #1d6aff;
		font-size: 20rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 23rpx;
	}

	.text_6 {
		margin-left: 10rpx;
		align-self: flex-start;
		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		/* line-height: 26rpx; */
	}

	.text_7 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_10 {
		margin-left: 54rpx;
	}

	.group_5 {
		margin-top: 45rpx;
		width: 169rpx;
	}

	.text_8 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.image_3 {
		margin-left: 15rpx;
		margin-top: 12.5rpx;
		flex-shrink: 0;
		width: 10rpx;
		height: 19rpx;
	}

	.text_15 {
		margin-left: 24rpx;
		margin-bottom: 9rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		// line-height: 33rpx;
	}

	.text_20 {
		margin-left: 24rpx;
		
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		
	}

	.image {
		width: 116rpx;
		height: 116rpx;
		border-radius: 50%;
		background-color: #FFF;
	}

	.group_4 {
		margin: 8rpx 0 9rpx 22rpx;
	}

	.text-wrapper {
		margin-left: 20rpx;
		margin-top: 10rpx;
		padding-bottom: 8rpx;
		border-radius: 28rpx;
		border: 1px solid #fff;
		height: 40rpx;
		width: 100rpx;
		text-align: center;
		line-height: 35rpx;
	}

	.image_2 {
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 0;
		margin-right: 0;
		align-self: flex-end;
	}

	.group_6 {
		// margin-top: 5px;
	}

	.text_1 {
		color: #ffffff;
		font-size: 36rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 43rpx;
	}

	.text_2 {
		margin-top: 30rpx;
		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
		text-align: left;
		width: 100%;

	}

	.text_3 {
		margin: 0 7rpx;
		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
	}

	.text_4 {

		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		
		margin:6rpx 10rpx 0 10rpx;
	}

	.text_5 {
	
		margin-top: 4rpx;
		color: #ffffff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		
	}
</style>
